<template>
  <div class="table-operator">
    <span><a-icon type="environment" /></span>
    <span><a-icon type="environment" /></span>
    <span><a-icon type="environment" /></span>
    <a-divider type="vertical" />
    <span><a-icon type="environment" /></span>
    <span><a-icon type="environment" /></span>
    <span><a-icon type="environment" /></span>
    <a-divider type="vertical" />
    <span><a-icon type="environment" /></span>
    <span><a-icon :component="loc" /></span>
    <span><a-icon type="edit" /></span>
    <a-divider type="vertical" />
  </div>
</template>

<script>
import loc from '@/assets/icons/loc.svg?inline'
import { loadModules } from 'esri-loader'
const options = {
  url: 'https://js.arcgis.com/3.34/',
  dojoConfig: {
    async: true,
    packages: [
      {
        location: '/modules',
        name: 'modules'
      }
    ]
  }
}
export default {
  props: {
    map: {
      type: Object,
      require: true,
      default: () => ({})
    },
    editToolbar: {
      type: Object,
      require: true,
      default: () => ({})
    }
  },
  data() {
    return {
      loc
    }
  },
  mounted() {
    this.startup()
  },
  methods: {
    startup() {
      loadModules(
        [
          'esri/toolbars/edit',
          'esri/geometry/Polygon',
          'esri/symbols/SimpleFillSymbol',
          'esri/graphic',
          'dojo/_base/event',
          'dojo/domReady!'
        ],
        options
      )
        .then(([Edit, Polygon, SimpleFillSymbol, Graphic, event]) => {
          // TODO https://developers.arcgis.com/javascript/3/jssamples/toolbar_edit.html

          // this.editToolbar.activate( evt.graphic)
          var polygon = new Polygon({
            rings: [
              [
                [250.5517578125, 46.20090625],
                [248.837890625, 43.4323515625],
                [254.7705078125, 39.5651640625],
                [258.330078125, 45.409890625],
                [255.95703125, 46.464578125]
              ]
            ],
            spatialReference: {
              wkid: 4326
            }
          })
          var polygonSymbol = new SimpleFillSymbol()
          this.map.graphics.add(new Graphic(polygon, polygonSymbol))

          this.map.graphics.on('click', (evt) => {
            event.stop(evt)
            var options = {
              allowAddVertices: true,
              allowDeleteVertices: true
            }
            this.editToolbar.activate(Edit.MOVE | Edit.EDIT_VERTICES, evt.graphic, options)
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    activate(mapModules, type) {
      this.drawToolbar.activate(type) // type :POINT-'point';POLYLINE-polyline;POLYGON-polygon
      this.drawToolbar.on('draw-end', (evt) => {
        var symbol
        this.drawToolbar.deactivate()
        switch (evt.geometry.type) {
          case 'point':
          case 'multipoint':
            symbol = new mapModules.SimpleMarkerSymbol()
            break
          case 'polyline':
            symbol = new mapModules.SimpleLineSymbol()
            break
          default:
            symbol = new mapModules.SimpleFillSymbol()
            break
        }
        var graphic = new mapModules.Graphic(evt.geometry, symbol)
        this.map.graphics.add(graphic)
      })
    }
  }
}
</script>

<style></style>
